<template>
  <div>
    <div class="mine pr">
      <mt-header fixed class="head" title="">
        <router-link to="/home" slot="left">
          <mt-button icon="" class="iconfont">&#xe615;</mt-button>
        </router-link>
        <mt-button class="iconfont buy" icon="" slot="right">&#xe827;</mt-button>
      </mt-header>
      <img class="vertop imgpaved" src="../../assets/img/memberheaderbg.jpg" />
      <div class="member-intro">
        <div class="member-icon">
          <a href="##">
            <img src="../../assets/img/membericon.png" alt="">
          </a>
        </div>
        <div class="member-txt">
          <h2>清风摇曳流年</h2><span></span>
          <p>会员积分：
            <span>1250</span>分
          </p>
        </div>
      </div>
    </div>
    <ul class="list">
      <li class="list-item"><span class="iconfont item1">&#xe634;</span><i> 待付款 </i><span class="iconfont">&#xe638;</span></li>
      <li class="list-item"><span class="iconfont item2">&#xe602;</span><i> 待收货 </i><span class="iconfont">&#xe638;</span></li>
      <li class="list-item"><span class="iconfont item3">&#xe693;</span><i> 收藏夹 </i><span class="iconfont">&#xe638;</span></li>
      <li class="list-item"><span class="iconfont item4">&#xe61b;</span><i> 全部订单 </i><span class="iconfont">&#xe638;</span></li>
    </ul>
    <ul class="list">
      <li class="list-item"><span class="iconfont item5">&#xe729;</span><i> 收货地址 </i><span class="iconfont">&#xe638;</span></li>
      <li class="list-item"><span class="iconfont item6">&#xe637;</span><i> 积分管理 </i><span class="iconfont">&#xe638;</span></li>
      <li class="list-item"><span class="iconfont item7">&#xe633;</span><i> 我的消息 </i><span class="iconfont">&#xe638;</span></li>
      <li class="list-item"><span class="iconfont item8">&#xe635;</span><i> 旗袍知识 </i><span class="iconfont">&#xe638;</span></li>
    </ul>
    <div class="last"></div>
  </div>
</template>

<script>
    export default {
        name: "Mine"
    }
</script>

<style scoped lang="stylus">
  .last
    padding-bottom: 4rem
  .list
    background: #fdeeda
    margin-top: .6rem
    .list-item
      border-bottom: 1px solid rgba(210,191,176,0.5)
      padding: .5rem 0
      width: 95%
      margin: 0 auto
      display flex
      justify-content space-between
      align-items center
      .item1
        color: #faa354
      .item2
        color: #fdab29
      .item3
        color: #f9534f
      .item4
        color: #f9acb7
      .item5
        color: #9199ec
      .item6
        color: #508ff6
      .item7
        color: #b8d9e0
      .item8
        color: #33d7c9
      span
        font-size: 1.2rem
      i
        flex 1
        text-indent .2rem
        font-size: .8rem
  .mine
    .member-intro
      display: inline-block;
      width: 224px;
      height: 80px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-112px,-30px);
      .member-txt
        display: inline-block;
        float: right;
        height: 80px;
        width: 50%;
        margin: 19px 0 0 0;
        p
          font-size: 11px;
          line-height: 30px;
          height: 30px;
          color: #39191a;
        h2
          font-size: 13px;
          line-height: 13px;
          height: 13px;
          color: #39191a;
      .member-icon
        display: inline-block;
        width: 80px;
        height: 80px;
        a,img
          display: block;
          width: 80px;
          height: 80px;
    .head
      z-index 2
      display flex
      background: transparent
      color: #3f2121
</style>
